<template>
  <view class="apply-teacher-container">
    <view class="page-header">
      <view class="header-title">申请教员</view>
      <view class="header-subtitle">填写信息成为我们的教员</view>
    </view>

    <view class="form-container">
      <uni-forms
        ref="form"
        :modelValue="formData"
        :rules="rules"
        label-position="left"
        input-align="right"
      >
        <view class="form-section">
          <view class="section-title">
            <view class="title-decoration"></view>
            <text>基本信息</text>
          </view>

          <uni-forms-item
            required
            label="姓名"
            name="realName"
            class="form-item-row"
          >
            <input
              class="form-input"
              focus
              v-model="formData.realName"
              placeholder="请输入姓名"
            />
          </uni-forms-item>

          <uni-forms-item
            required
            label="手机号"
            name="mobile"
            class="form-item-row"
          >
            <input
              class="form-input"
              type="tel"
              v-model="formData.mobile"
              placeholder="请输入手机号"
            />
          </uni-forms-item>

          <uni-forms-item
            required
            label="身份证号"
            name="idNo"
            class="form-item-row"
          >
            <input
              class="form-input"
              type="idNo"
              v-model="formData.idNo"
              placeholder="请输入身份证号"
            />
          </uni-forms-item>

          <uni-forms-item
            required
            label="所属机构"
            name="organId"
            class="form-item-row"
          >
            <uni-data-select
              v-model="organId"
              :localdata="range"
              @change="changeOrgan"
              class="custom-select"
              placeholder="请选择所属机构"
            ></uni-data-select>
          </uni-forms-item>
        </view>

        <view class="form-section">
          <view class="section-title">
            <view class="title-decoration"></view>
            <text>证件上传</text>
          </view>

          <uni-forms-item
            required
            label="教练证"
            name="teacherCertificate"
            :label-width="100"
            class="form-item-upload"
          >
            <uni-file-picker
              v-model="picArr"
              limit="1"
              @select="onSelectFront"
              :image-styles="imageStyles"
            >
              <view class="upload-btn">
                <view class="upload-icon">+</view>
                <text class="upload-text">上传教练证照片</text>
              </view>
            </uni-file-picker>
          </uni-forms-item>
        </view>
      </uni-forms>

      <button class="submit-button" @click="submit" type="primary">
        确认申请
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onBeforeMount } from "vue";
import { uploadImg, toPlainObject, globalData, checkFn } from "@/utils/util";
import api from "@/utils/api.js";
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';

const form = ref(null);
const imageStyles = {
  width: 220,
  height: 160,
  border: {
    color: "#f2f2f2",
    width: 1,
    style: "solid",
    radius: "8rpx",
  },
};

let range = ref([]);
let organId = ref(0);
let picArr = reactive([]);
let formData = reactive({
  realName: "",
  mobile: "",
  idNo: "",
  organId: 0,
  teacherCertificate: null,
});

// 上传教练证
const onSelectFront = async (e) => {
  const file = e.tempFiles[0];
  if (file) {
    await uploadImg(file).then((result) => {
      formData.teacherCertificate = result;
    });
  }
};

const submit = async () => {
  try {
    // 校验表单
    await form.value.validate();

    await api.applyTeacher(toPlainObject(formData)).then((res) => {
      if (res.msg === "操作成功") {
        uni.showToast({
          title: res.msg,
          icon: "success",
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
      }
    });
  } catch (error) {
    console.log("表单校验失败:", error);
  }
};

// 选择机构
const changeOrgan = (e) => {
  formData.organId = e;
};

onBeforeMount(async () => {
  try {
    await api
      .organInfoLst({
        curPage: 1,
        pageSize: 100,
      })
      .then((res) => {
        if (res.code === 0) {
          range.value = res.data.itemLst.map((item) => {
            return {
              text: item.companyName,
              value: item.organId,
            };
          });
        }
      });
  } catch (error) {
    console.log(error);
  }

  if (uni.getStorageSync("userInfo")) {
    formData.realName = uni.getStorageSync("userInfo").realName;
    formData.idNo = uni.getStorageSync("userInfo").idNo;
    formData.organId = uni.getStorageSync("userInfo").organId;
    organId.value = uni.getStorageSync("userInfo").organId;
    picArr = uni.getStorageSync("userInfo").teacherCertificate && [
      {
        url:
          globalData.OSS_URL +
          uni.getStorageSync("userInfo").teacherCertificate,
      },
    ];
  }
});

const rules = {
  realName: {
    rules: [{ required: true, errorMessage: "姓名不能为空" }],
  },
  mobile: {
    rules: [
      { required: true, errorMessage: "手机号不能为空" },
      { pattern: checkFn("mobile"), errorMessage: "手机号格式不正确" },
    ],
  },
  idNo: {
    rules: [
      { required: true, errorMessage: "身份证号不能为空" },
      { pattern: checkFn("idNo"), errorMessage: "身份证号格式不正确" },
    ],
  },
  organId: {
    rules: [{ required: true, errorMessage: "机构不能为空" }],
  },
  teacherCertificate: {
    rules: [{ required: true, errorMessage: "教练证不能为空" }],
  },
};

// 分享给朋友
onShareAppMessage(() => {
  return {
    title: '申请成为教员 - 飞手之家',
    path: '/pages/applyTeacher/applyTeacher',
    imageUrl: '/static/images/head.jpg'
  };
});

// 分享到朋友圈
onShareTimeline(() => {
  return {
    title: '申请成为教员 - 飞手之家',
    query: '',
    imageUrl: '/static/images/head.jpg'
  };
});
</script>

<style lang="scss" scoped>
.apply-teacher-container {
  background-color: #f6f8fa;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

.page-header {
  background-color: #2cbaff;
  padding: 40rpx 40rpx 60rpx;
  color: #fff;
  position: relative;
  margin-bottom: 30rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.header-subtitle {
  font-size: 26rpx;
  opacity: 0.9;
}

.form-container {
  width: 92%;
  margin: 0 auto;
  position: relative;
  top: -40rpx;
}

.form-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.title-decoration {
  width: 8rpx;
  height: 32rpx;
  background-color: #2cbaff;
  border-radius: 4rpx;
  margin-right: 16rpx;
}

.form-item-row {
  :deep(.uni-forms-item__inner) {
    flex-direction: row;
    align-items: center;
  }

  :deep(.uni-forms-item__label) {
    width: 160rpx;
    justify-content: flex-start;
    padding-right: 12rpx;
    white-space: nowrap;
    font-size: 28rpx;
    color: #666;
  }

  :deep(.uni-forms-item__content) {
    flex: 1;
  }
}

.form-item-upload {
  :deep(.uni-forms-item__inner) {
    flex-direction: column;
    align-items: flex-start;
  }

  :deep(.uni-forms-item__label) {
    font-size: 28rpx;
    color: #666;
    padding-bottom: 16rpx;
    width: auto;
    white-space: nowrap;
  }
  
  :deep(.uni-forms-item__content) {
    width: 100%;
  }
}

.form-input {
  height: 80rpx;
  border-bottom: 1px solid #eaeaea;
  font-size: 28rpx;
  color: #333;
  width: 100%;
  text-align: right;
}

.custom-select {
  width: 100%;

  :deep(.uni-data-select) {
    border: 1px solid #eaeaea;
    border-radius: 8rpx;
  }

  :deep(.uni-select__input-text) {
    font-size: 28rpx;
    text-align: right;
  }
}

.upload-btn {
  width: 100%;
  height: 200rpx;
  background-color: #f9f9f9;
  border: 2rpx dashed #ddd;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #2cbaff;
  transition: all 0.3s;
  
  &:active {
    background-color: #edf8ff;
  }
}

.upload-icon {
  font-size: 50rpx;
  margin-bottom: 10rpx;
}

.upload-text {
  font-size: 24rpx;
  text-align: center;
}

.submit-button {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #2cbaff;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  margin-top: 40rpx;
  margin-bottom: 60rpx;
  box-shadow: 0 6rpx 20rpx rgba(44, 186, 255, 0.3);
}

:deep(.is-required) {
  color: #ff5a5f;
}

:deep(.uni-file-picker__container) {
  display: inline-block;
}
</style>
